<template>
  <section id="" class="" >
    <section class="header" style="position: fixed;z-index: 1000;width: 100%" :listByMap="listByMap">
      <HeaderPublc ></HeaderPublc>
    </section>
    <div>
      <!--- 回收完成-->
      <el-dialog  :visible.sync="dialogVisible" width="550px" >
        <el-form :label-position="labelPosition" label-width="100px" :model="fromData" :rules="languageData.id=='Chinese'?rules2:rules" ref="fromData">
          <el-form-item :label="languageData.id=='Chinese'?'回收状态':'Status'" prop="usageStatus" style="width: 500px">
            <el-radio v-model="fromData.usageStatus" label="3">{{languageData.id=='Chinese'?'回收中':'Recycling'}}</el-radio>
            <el-radio v-model="fromData.usageStatus" label="1">{{languageData.id=='Chinese'?'回收完成':'Recycled'}}</el-radio>
          </el-form-item>
          <el-form-item :label="languageData.id=='Chinese'?'回收地址':'location'" prop="address" style="width: 500px">
            <el-input v-model="fromData.address"></el-input>
          </el-form-item>
          <el-form-item label="" style="margin-bottom: 0px;">
            <div style="text-align: right">
              <el-button  round class="el-button--primary"  style="width: 120px;" v-on:click="submitForm('fromData')"> {{languageData.public.done}} </el-button>
              <el-button  round @click="dialogVisible = false" style="width: 120px">{{languageData.public.cancel}}</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--设备状态记录详情-->
      <el-dialog  :visible.sync="dialogVisible2" width="40%" >
        <div class="alertBox" v-show="Record.length>0" :RecordListData="RecordListData">
          <div class="card" v-for="list in Record" >
            <div class="clearfix"><div class="timeLabel left">{{list.createTime}}</div> <div class="left"> {{list.toStatusText}}</div><div class="cleae"></div></div>
            <div class="clearfix"><div class="timeLabel left"></div>
              <div class="left">
                <span class="city">{{list.remarkTo}}</span> <span class="el-icon-back back" v-show="list.remarkFrom && list.remarkTo"></span>
                <span class="city">{{list.remarkFrom}}</span></div> <div class="cleae"></div>
              </div>
              </div>
            <div>
          </div>
        </div>
        <div class="card"  v-show="Record.length<=0">
          <div style="text-align: center;font-size: 16px;font-weight: bold">暂无该设备数据</div>
        </div>
        <span slot="footer" class="dialog-footer" style="text-align: center">
      <el-button size="medium" round @click=" dialogVisible2 = false" style="width: 120px">{{languageData.public.close}}</el-button>
      </span>
      </el-dialog>
    </div>
    <section class="cent"  :UserListData="UserListData">
      <div id="plan"  >
        <!-- 搜索-->
        <div class="saech" >
          <el-input class="saechIput"  v-model="sechData.deviceNumber" :placeholder="languageData.admin.ImeiNo"  ></el-input>
          <el-button type="primary" class="saechBout"  icon="el-icon-search" v-on:click="saechFn(1)"> </el-button>
          <div >
          </div>
        </div>

        <div class="Box" style="" :DeviceListData="DeviceListData">
          <div style="overflow-y:scroll;margin-right: -20px;margin-bottom: -20px; max-height: 700px;padding-bottom: 20px;">
            <div class="list" v-for="(list,index) in tableData2" :key="list.deviceNumber" @click="updateMap(list)">
              <div class="address clearfix type3" >
                <div class="none3 left">
                  <!--设备号--->
                  <p class="davisText"> <span>{{languageData.admin.ImeiNo}} </span> <span class="number"> {{list.deviceNumber}}</span></p>
                </div>
                <div class="none3 right" style="width: 20px;margin-left: 10px"  @click="openFn(list,index)">
                  <p style="cursor: pointer" >
                    <span class="ric" :class="{'el-icon-arrow-up':index != indexCheck,'el-icon-arrow-down':index == indexCheck}">  </span>
                  </p>
                </div>
                <div class="none3 right" style=""><!--电量--->
                  <p style="padding-left: 10px;"> <span>{{languageData.admin.battery}}: {{list.battery}}</span></p>
                </div>
              </div>
              <div class="address clearfix type3">
                <!-- 列表-->
                <el-collapse-transition>
                  <div v-show="index == indexCheck" class="centCop">
                     <div class="clearfix centList">
                       <div class="left centText">
                         <!--设备状态--->
                         <p class="top">{{languageData.admin.deviceType}}</p>
                         <p class="bottom">{{list.model}}</p>
                       </div>
                       <div class="left centText">
                         <!--设备状态--->
                         <p class="top">{{languageData.admin.deviceStatus}}</p>
                         <p class="bottom">{{list.deviceStatusText}}</p>
                       </div>
                       <div class="left centText">
                         <!--使用状态--->
                         <p class="top">{{languageData.admin.Usages}}</p>
                         <p class="bottom">{{list.usageStatusText}}</p>
                       </div>
                     </div>
                    <div class="clearfix centList">
                      <!--操作--->
                      <div class="left centText">
                        <p class="top">{{languageData.admin.set}}</p>
                        <p class="bottom">
                          <span class="clickBot el-icon-edit-outline" v-show="list.usageStatus == 4 || list.usageStatus == 3">
                            <span style="padding-left:10px;" v-on:click="updateDeviceUsageStatusFn(list.id,1)">{{languageData.id=='Chinese'?'回收':'Recycle'}}</span>
                        </span>
                          <span class="clickBot" v-show="list.usageStatus != 4 && list.usageStatus != 3">
                            ----
                        </span>
                        </p>
                      </div>
                      <!--地址详情--->
                      <div class="left centText">
                        <p class="top">{{languageData.admin.Location}}</p>
                        <p class="bottom">
                          <span class="clickBot"  v-on:click="updateDeviceUsageStatusFn(list.id)" >
                          <a>{{languageData.id=='Chinese'?'详情':'details'}}</a>
                          </span>
                        </p>
                      </div>
                    </div>
                  </div>
                </el-collapse-transition>
              </div>
            </div>
            <div class="cleae" style="text-align: right;padding-right: 20px;padding-top: 20px;margin-bottom: 40px">
              <el-pagination layout="prev, pager, next" :page-count="sechData.count" @current-change="handleCurrentChange">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <div class="mapBox">
        <div id="map" class="" >
      </div>
      </div>
    </section>

    <section class="footer" >

    </section>
  </section>
</template>
<style scoped>
  .centList{margin-top: 10px;}
  .centText{width: 32%;margin-right: 1%}
  .centText .top{line-height: 20px;font-size: 12px;color: #999999}
  .centText .bottom{font-size: 14px;line-height: 20px;}
  .clickBot{cursor: pointer;}
  .clickBot:hover{color:#409eff }
  .type3 .tow{margin-left: 10px;float: left }
  .type3 .no{float: left;}
  .cent{ border-top:1px solid #dedede;}
  /*#bodyBox{background-color: #fff}*/
  .ric{display: block;height: 15px;width: 15px;text-align: center;border-radius: 10px;border: 1px solid #999;margin-top: 0px;}
  .cent .map2{margin-left: 0px; background: grey; margin-right: 10px;margin-top: 50px}
  .map3  .mapBox{;position:fixed ;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 1000}
  .map3  .map{margin: 0px;height: 100px;}
  .map3 .Box{position:fixed;top: 60px;left: 10px ;z-index: 1002 ;}
  .Box{ overflow: hidden;min-height: 700px;padding-top: 20px}
  #plan{ width:343px;position: fixed;top: 50px;right: 0px;z-index: 1002 ;background: #fff;padding: 20px;height: 100%;padding-bottom: 0px}

  .saech{ width: 105%;height: 35px;margin-left: -5px;position: relative}
  .saechIput{width: 290px;margin-right: 0px;position: relative;z-index: 10;border: none 0px}
  .saechBout{border-radius: 0px 4px 4px 0px;position: relative; left: -7px;z-index: 11;font-size: 14px;font-weight: bold;width: 60px;text-align: center}
  .saechBout:hover{background-color: #409eff;border-color: #409eff}
  .saechBout{background-color: #0e72b9; border-color: #0e72b9 }
  #list p{font-size: 14px;text-align: left;line-height: 30px;word-break:break-all;}
  .listCent p{line-height: 20px;}
  .next span{ font-size: 12px;cursor: pointer;color: #999}
  .first p{ line-height: 30px;font-weight: bold;cursor: pointer;width:185px;word-break:break-all;}
  .last p{ line-height: 30px;font-weight: bold;cursor: pointer; width:185px;word-break:break-all;}
  .last p:hover{ color: #409eff}
  .first p:hover{ color: #409eff}
  li{position: relative;padding: 5px;}
  #list li p{font-size: 12px;line-height: 20px;cursor: pointer;width: 160px; word-break:break-all;}
  #list li p:hover{ color: #409eff}
  ul{ padding: 0px;padding-bottom: 0px;height:0px;}

  iframe{left: 500px;}
  .last .none{border-left: 0px none}
  .address p{font-size: 14px;text-align: left;line-height: 40px;color: #1d2739}
  .type3 p {font-size: 14px;font-weight: normal;line-height: 22px;}
  .none3{display: none}
  .type3 .none3{display: block}
  .alertBox{max-height: 500px;overflow-y: scroll}
  .city{ font-weight: bold;text-align: left}
  .card{padding: 0px 0px 10px 0px;}
  .timeLabel{ width: 150px;display: block;height: 30px;}
  .list{padding: 12px 0px;border-bottom: 1px solid #e5e5e5}
  .davisText{padding-left: 10px;background: #e8f0f6;padding:0px 2px;text-indent:10px; }
  .number{background: #ffffff;padding:0px 8px 1px 8px;margin-left: 5px;text-indent: 5px;font-size: 16px;font-weight: bold;margin-top: 1px;line-height: 20px;height: 20px}
</style>
<script>
  import HeaderPublc from '../public/herder.vue'
  import saechFirst from '../index.vue'
  import Public from '../../vuex/public.js'
  import Clipboard from 'clipboard'
  import {mapState, mapActions} from 'vuex'
  import makImg from '../../../static/img/icon/icon_car_nor.png'
  import wx from 'weixin-js-sdk'
  import QRCode from '../../vuex/qrcode'
  export default {
    name: 'my-map',
    created () {
      // 查看本页面路由
      this.check = this.$route.name;
      // 查看有无登陆
      var userData = Public.publicLo.sessionStorageGet('user');
      if (userData) {
        // 转换对象
        userData = JSON.parse(userData)
        // 渲染
        this.user = {
          nickName: userData.nickName,
          headImg: userData.headImg,
          id: userData.userId
        }
      }
    },
    data () {
      return {
        map:'',
        bubble:'',
        times:'',
        indexCheck:-1,
        marker:[],
        sechData:{
          deviceNumber:'',
          page:1,
          pageSize:10
        },
        tableData2:[],// 设备渲染列表
        fromData: {
          deviceId: '',
          usageStatus: '1',
          recyclePosition:{country: null, city: null, address: ''},
          address:'',
          page: 1,
          pageSize: 10,
          count: 1,
        },
        rules: {
          usageStatus: [
            { required: true, message: 'Please choose a status', trigger: 'blur' },
          ],
          'address': [
            { required: true, message: 'Please fill the recycling address', trigger: 'blur' },
//            { validator: indeofPassword, trigger: 'blur' }
          ],
        },
        rules2: {
          usageStatus: [
            { required: true, message: '请选择回收状态', trigger: 'blur' },
          ],
          'address': [
            { required: true, message: '请填写回收地址', trigger: 'blur' },
//            { validator: indeofPassword, trigger: 'blur' }
          ],
        },
        dialogVisible: false, // 标记状态弹框
        dialogVisible2: false,// 详情弹框
        labelPosition: 'left',
        Record:[{
          id: '',
          remarkTo: '',
          remarkFrom: '',
          createTime: '',
          toStatus: '',
          toStatusText: ''
        }],
      }
    },
    methods: {
      ...mapActions({
        lastLocation: 'lastLocation',
        getDeviceList:'getDeviceList',
        showManages:'showManages',
        addDeviceRecord:'addDeviceRecord'
      }),
      handleCurrentChange (val) {
        console.log(val)
        this.sechData.page = parseInt(val)
        this.saechFn()
      },
      // 列表展开
      openFn(list,index){
        if(this.indexCheck == index){
          this.indexCheck = -1;
          return
        }
        this.tableData=[]
        this.indexCheck = index;
        //this.listFn(list.id)
      },
      //
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
//            this.updateStatusPost()
            this.fromData.recyclePosition.address = this.fromData.address
            var parm = {
              deviceId: JSON.stringify(this.fromData.deviceId),
              status: JSON.parse(this.fromData.usageStatus), // 0：运输中 1：运输完成 2：运输异常
              location: this.fromData.address,
            }
            this.addDeviceRecord(parm)
            this.dialogVisible = false
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      // 渲染地图
      mapFn (map, parm) {
          var point
          if (parm) {
            point =  new google.maps.LatLng(parm.latitude, parm.longitude);
          } else {
            point = new google.maps.LatLng(39.915,116.404);
          }
          var mapProp = {
            center:point,
            zoom:4,
            mapTypeId:google.maps.MapTypeId.ROADMAP
          };
          this.map = new google.maps.Map(document.getElementById("map"), mapProp);
      },
      mapService () {
        // 选取地图容器

        var mapContainer = document.getElementById('map')
//        this.routeInstructionsContainer = document.getElementById('panel')
        // 地图配置：初始化与地图平台数据
        this.platform = new H.service.Platform({
          app_id: 'xDU8ZS8OLFy8aG8qzDKS',
          app_code: '7gaEA7LqoE9oFNnbyVFKTA'
        })
        //
        this.defaultLayers = this.platform.createDefaultLayers()
        //  初始化一张地图,设置中心点
        this.map = new H.Map(mapContainer,this.defaultLayers.normal.map)
        // 默认，实现泛/缩放。
        this.behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map))
        // 创建默认UI组件
        this.ui = H.ui.UI.createDefault( this.map, this.defaultLayers)
        // 创建地图
        this.mapFn(this.map)
      },
      /**
       * 谷歌地图
       */
      //加载谷歌地图静态文件
      googleMap(){
        // var script = document.createElement("script");
        // script.src = "http://maps.google.cn/maps/api/js?key=AIzaSyBXa5IGr11xML0OumozehXsvEJ9Y7tTV4Q&language=zh-CN&sensor=TRUE_OR_FALSE";
        // document.body.appendChild(script);
        var that=this;
        that.googleMapService()
      },
      //创建地图实例
      googleMapService () {
        this.mapFn()
        // var point = new BMap.Point(116.404, 39.915);
      },


      addRouteShapeToMap (route,a) {
        //herrd地图
        if(this.mapType=='here'){
          var lineString = new H.geo.LineString()
          // 从shape绘画路径
          // routeShape = route.shape,
          var routeShape = route
          var  polyline
          // 轮询解析坐标
          routeShape.forEach(function (point) {
            // var parts = point.split(',')
            // 路径坐标收集
            lineString.pushLatLngAlt(point.lat, point.lng)
          })
          // 创建完整路径
          polyline = new H.map.Polyline(lineString, {
            style: {
              lineWidth: 4,
              strokeColor: 'rgba(0, 128, 255, 0.7)'
            }
          })
          // 将路径添加到地图
          this.map.addObject(polyline)
          // And zoom to its bounding rectangle/自适应显示路径
          this.map.setViewBounds(polyline.getBounds(), true)
          this.addManueversToMap(route)
        }
        if(this.mapType == 'baidu'){
          var pois = [];
          for(let i in route){
            if(route[0]){
              var p = new BMap.Point(route[i].lng, route[i].lat)
              p.location=route[i].location
              pois.push(p)
            }
          }
          var that = this
          if(pois.length<=10){
            this.points[0]=pois
          }
          this.points = this.pointsBefore(pois,10);
          this.polylineList=[]
          setTimeout(function(){
            that.convertor = new BMap.Convertor();
            //递归控制
            that.myTransMore(1,5)
          }, 1000);
        }
        if(this.mapType == 'google'){
          var myTrip=[]
          this.addManueversToMap(route,a)
          for(let i in route){
            // var x = new google.maps.Projection(route[i].lat,route[i].lng)
            // consoel.log(x,'x')
            var p = new google.maps.LatLng(route[i].lat,route[i].lng);
            myTrip.push(p)
          }
          var flightPath=new google.maps.Polyline({
            path:myTrip,
            strokeColor:"#0000FF",
            strokeOpacity:0.8,
            strokeWeight:6
          });
          flightPath.setMap(this.map);
        }
      },
      /** 创建地图点maneuver
       * Creates a series of H.map.Marker points from the route and adds them to the map.
       * @param {Object} route  A route as received from the H.service.RoutingService
       */
      addManueversToMap (route,a) {
          for( let i in route){
            var myIcon  = {
              url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
              // This marker is 20 pixels wide by 32 pixels high.
              //size: new google.maps.Size(20, 32),
              // The origin for this image is (0, 0).
              origin: new google.maps.Point(0, 0),
              // The anchor for this image is the base of the flagpole at (0, 32).
              anchor: new google.maps.Point(0, 20)
            };
            var myCenter=  new google.maps.LatLng(route[i].latitude,route[i].longitude);

            var url = "../../../static/img/davisDeft.png"
            var url2 = "../../../static/img/davisDeft2.png"
            if(i==0){
              myIcon.url = "../../../static/img/davisDeft2.png"
              myIcon.anchor= new google.maps.Point(5,20)
            }else {
                myIcon.url = "../../../static/img/davisDeft2.png"
                myIcon.anchor= new google.maps.Point(5, 20)
            }

            //var MarkerLoadImage = new google.maps.MarkerImage(url,new google.maps.Size(0,0),new google.maps.Point(0,0),new google.maps.Point(0,0),new google.maps.Size(0,0));
            this.marker[i] =  new google.maps.Marker({
              id:i,
              draggable:true,
              animation:google.maps.Animation.BOUNCE,
              position:myCenter,
              icon:myIcon
            });
            this.marker[i].setMap(this.map);
            var that = this;
            // google.maps.event.addListener(marker,'click',function (e) {
            //   console.log(e,'e')
            //   if (marker.getAnimation() != null) {
            //     marker.setAnimation(null);
            //   } else {
            //     marker.setAnimation(google.maps.Animation.BOUNCE);
            //   }
            // });

            google.maps.event.addListener(this.marker[i],'click',function() {
              var index = parseInt(this.id);
             //  console.log(that.marker[index])
             // console.log(that.marker[index].icon.url = '../../../static/img/davisDeft.png')
              var x
              try{
                x = that.marker[index].animation
              }
              catch(err) {
                x = ''
              }
              console.log(x)
              if(x == 1){
                  //that.marker[index].setAnimation(null);
                } else if(x === null){
                  that.marker[index].setAnimation(google.maps.Animation.BOUNCE);
              }
              that.marker[index] = new google.maps.LatLng(route[index].latitude,route[index].longitude);
              var s =that.openBubble(route[index])
              s.setPosition(that.marker[index]);
              s.open(that.map);
            });
            var T = this.openBubble(route[i])
            if( i == route.length-1){
              T.open(this.map,this.marker[i]);
            }
        }
      },
      toggleBounce(marker){
         if (marker.getAnimation() != null) {
          marker.setAnimation(null);
        } else {
          marker.setAnimation(google.maps.Animation.BOUNCE);
        }
      },
      // 标注弹框
      openBubble (position,text) {
          var content = '<p style="font-size: 14px;text-align: left;color: #1d2739">'+this.languageData.admin.ImeiNo+':' + position.imei; + '</p>';
          if(!this.bubble){
            this.bubble = new google.maps.InfoWindow({
              content:content,
            });
          }else {
            this.bubble.setContent(content)
          }
          return  this.bubble
        // 有无弹框
      },
      //设备列表查询
      saechFn (a) {
        //传入搜索条件
        if(a){
          this.sechData.page = 1;
          this.sechData.pageSize = 10;
        }
        this.sechData.deviceNumber = this.sechData.deviceNumber.replace(/\n/ig,'');
        var str = this.sechData.deviceNumber;
        str = str.replace(/(^\s*)|(\s*$)/g, "");

        var parm = {
          deviceNumber: this.sechData.deviceNumber,
          page: this.sechData.page,
          pageSize: this.sechData.pageSize
        }
        this.indexCheck = -1;
        this.getDeviceList(parm);
        // 清空 vuex 列表
        //this.$store.commit('transportListTo', null)
      },
      // 设备列表解析
      deviceListFn(res){
        if (res.body.count) {
          var cunt = res.body.count
          // 取整
          this.sechData.count = Math.ceil(cunt / this.fromData.pageSize)
        }
        res = res.body.data
        this.tableData2 = []
        for (let i in res) {
          var deviceStatus = Public.publicLo.status('deviceStatus',this.languageData.id,res[i].deviceStatus)
            ,usageStatus = Public.publicLo.status('usageStatus',this.languageData.id,res[i].usageStatus);
          var pu = {
            id: res[i].id,
            deviceNumber: res[i].deviceNumber,
            imei: res[i].deviceNumber,
            model: res[i].model,
            battery: res[i].battery + '%',
            deviceStatus: res[i].deviceStatus,
            usageStatus: res[i].usageStatus,
            deviceStatusText: deviceStatus ,
            usageStatusText: usageStatus,
            company: res[i].company,
            latitude:res[i].latitude,
            longitude:res[i].longitude
          }
          this.tableData2.push(pu)
        }
      },
      // 记录列表解析
      RecordListFn(res){
        var remarkTo = '',createTime = {ymd: '', hms: '', times: '', week: '', md: '', m: '', d: '', s: '', y: ''}
        res = res.body.data;
        this.Record = []
        for (let i in res) {
          var remarkFrom = {}, toStatusTetx = ''
          // 解析创建时间
          if(res[i].createTime){
            createTime = Public.publicLo.timeCheng(res[i].createTime)
          }
          // 解析地址
          var str ={
            destPlId:'',
            transitAddress:'',
            originPlId:""
          }
          if(res[i].remark){
            str =JSON.parse(res[i].remark)
          }
          var ctiyText = ''
          if(str.destPlId){
            ctiyText = Public.publicLo.getCityById(str.destPlId).stationCN
            //remarkFrom = Public.publicLo.getCityById(str.destPlId).stationCN
          }else if(str.transitAddress){
            ctiyText = str.transitAddress
           // remarkFrom = str.transitAddress
          }else if(str.originPlId){
            ctiyText = Public.publicLo.getCityById(str.originPlId).stationCN
           // remarkFrom = Public.publicLo.getCityById(str.originPlId).stationCN
          }else {
            ctiyText = ''
          }
          // 解析状态
          if(res[i].toStatus == 1) {toStatusTetx = '闲置中'; if(this.languageData.id=='English'){toStatusTetx = 'Idle' }  remarkTo = ''}
          if(res[i].toStatus == 2) {toStatusTetx = '使用中'; if(this.languageData.id=='English'){toStatusTetx = 'In Use' }}
          if(res[i].toStatus == 3) {toStatusTetx = '回收中'; if(this.languageData.id=='English'){toStatusTetx = 'Recovery' }}
          if(res[i].toStatus == 4) {toStatusTetx = '待回收'; if(this.languageData.id=='English'){toStatusTetx = 'Recycled' }}
          var pu  = {
            id: res[i].id,
            // remarkTo:remarkTo ,
            remarkFrom:ctiyText,
            createTime: createTime.times,
            toStatus: res[i].toStatus,
            toStatusText: toStatusTetx,
          }
          //remarkTo = ctiyText;

          this.Record.unshift(pu)
        }
        console.log(this.Record)
      },
      back(){
        if(this.$route.query.id){
          this.$router.go(-1)
        }else {
          this.firstSech = true;
          this.$store.commit('shechDat', null)
        }
      },
      // 列表查询
      listFn (id) {
        var parm = {
          id: id
        }
        this.showBox = false;
        this.id = id
        // 清空 vuex 地图列表
        this.$store.commit('addMapList', null)
        // 查询
        this.mapListpost(parm)
      },
      // 标记设备列表
      updateDeviceUsageStatusFn (id,status){
        this.fromData.deviceId = id
        if(status == 1){
          this.fromData.address = ''
          this.dialogVisible = true
        }else {
          this.fromData.page = 1;
          this.fromData.pageSize = 20;
          var parm = {
            deviceId : JSON.parse(id),
            page: this.fromData.page,
            pageSize: this.fromData.pageSize
          }
          this.showManages(parm)
          this.dialogVisible2 = true
        }
      },
      // 点击事件
      addClickHandler(content,marker,opts){
        var that=this
        marker.addEventListener("click",function(e){
            that.openInfo(content,opts,e)
          }
        );},
      // 弹框
      openInfo(content,opts,e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
        this.map.openInfoWindow(infoWindow, point); //开启信息窗口
      },
      // 解析地图数据
      fnByMap(res){
        res = res.body.data;
        this.addManueversToMap(res)
      },
      updateMap (list) {
        console.log(list)
        if(!list.latitude){
          this.openError(list.imei+' 暂无具体位置信息')
          return
        }
          var marker = new google.maps.LatLng(list.latitude,list.longitude);
          var T = this.openBubble(list)
          T.setPosition(marker);
          T.open(this.map)
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message.error(text)
      },
      // 操作状态
      listStatus (res) {
        this.loading = false
        if (res.status == 0) {
          // 修改成功
          this.openSuccess(res.message)
          var parm = {
            deviceNumber: this.fromData.deviceNumber,
            page: this.fromData.page,
            pageSize: this.fromData.pageSize
          }
          this.getDeviceList(parm)
        }
        if (res.status != 0) {
          // 修改成功 修改失败
          if(res.status == 1 ){
            var parm = {
              deviceNumber: this.sechData.deviceNumber,
              page: this.sechData.page,
              pageSize: this.sechData.pageSize
            }
            this.getDeviceList(parm)
            this.fromData.address = ''
          }else {
            this.openError(res.message)
          }
        }
        // 清空 vuex 中的本次记录，以免被下次操作状态造成混淆
        this.$store.commit('updateStatusTo', {body: null})
      },
      sev(){
          this.googleMap()
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      compare:function(property){
        return function(a,b){
          var value2 = a[property];
          var value1 = b[property];
          return value1 - value2;
        }
      },
    },
    computed: {
      DeviceListData: function () {
        var parm = this.DeviceList || '';
        console.log(parm)
        if (parm) {
          this.deviceListFn(parm)
        }
        return 1
      },
      UserListData: function () {
        var parm = this.updateStatus
        if (parm) {
          this.listStatus(parm)
        }
        return 1
      },
      // 语言切换
      languageData: function () {
        var parm = this.language
        if (parm) {
          this.languageCheak = parm.check
          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
          }
        }
        return parm
      },
      // 设备地址列表
      RecordListData: function () {
        var parm = this.RecordList
        if (parm) {

          this.RecordListFn(parm)
        }
        return 1
      },
      listByMap: function () {
        var parm = this.davislistByMap;
        if (parm) {
          if(parm.body.time != this.times){
            this.times = parm.body.time
            this.fnByMap(parm)
          }
        }
        return 1
      },
      ...mapState([
        'DeviceList',
        'language',
        'RecordList',
        'davislistByMap',
        'updateStatus'
      ])
    },
    mounted () {
      // var ul = location.href.split('#')[0]
      // this.tokenWx({url :ul})
      var body = document.documentElement.clientHeight
      var dom  = document.getElementById('map')
      body = body
      dom.style.height = body + 'px';
      this.sev();
      // 查询设备列表
      this.saechFn(1)
      // 查询设备地图列表
      var parm = {}
      this.lastLocation(parm)
    },
    components: {
      HeaderPublc: HeaderPublc, saechFirst: saechFirst
    }
  }
</script>

